<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

  <header class="mdl-layout__header">

    <!-- TABS -->

    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a id="tasks-header" href="#tasks" class="mdl-layout__tab" [class.is-active]="activeTab === 'tasks'" (click)="activeTab = 'tasks'">TASKS</a>
      <a id="processes-header" href="#processes" class="mdl-layout__tab" [class.is-active]="activeTab === 'processes'" (click)="activeTab = 'processes'">PROCESSES</a>
      <a id="report-header" href="#report" class="mdl-layout__tab" [class.is-active]="activeTab === 'reports'" (click)="activeTab = 'reports'">REPORTS</a>
    </div>
  </header>

  <main class="mdl-layout__content activiti">

    <!--  TASKS COMPONENT -->

    <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'tasks'" id="tasks">
      <div class="page-content">
        <div class="mdl-grid">
          <div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
            <div class="list-buttons">
              <activiti-start-task
                [appId]="appId"
                (onSuccess)="onStartTaskSuccess($event)">
              </activiti-start-task>
            </div>
            <adf-accordion>
              <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true" [headingIcon]="'assignment'">
                <activiti-filters
                  [appId]="appId"
                  [hasIcon]="false"
                  (filterClick)="onTaskFilterClick($event)"
                  (onSuccess)="onSuccessTaskFilterList($event)"
                  #activitifilter>
                </activiti-filters>
              </adf-accordion-group>
            </adf-accordion>
          </div>
          <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp list-column">
            <activiti-tasklist
              [appId]="taskFilter?.appId"
              [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
              [name]="taskFilter?.filter?.name"
              [assignment]="taskFilter?.filter?.assignment"
              [state]="taskFilter?.filter?.state"
              [sort]="taskFilter?.filter?.sort"
              [data]="dataTasks"
              [landingTaskId]="currentTaskId"
              (rowClick)="onTaskRowClick($event)"
              (onSuccess)="onSuccessTaskList($event)"
              (row-click)="onRowClick($event)"
              (row-dblclick)="onRowDblClick($event)"
              #activititasklist>
              <!-- Custom column definition demo -->
              <!--
              <data-columns>
                  <data-column key="name" title="NAME" class="full-width name-column"></data-column>
                  <data-column key="created" title="Created" class="hidden"></data-column>
              </data-columns>
              -->
            </activiti-tasklist>
          </div>
          <div class="mdl-cell mdl-cell--7-col task-column mdl-shadow--2dp">
            <activiti-task-details #activitidetails
                                   [debugMode]="true"
                                   [taskId]="currentTaskId"
                                   (formCompleted)="onFormCompleted($event)"
                                   (formContentClicked)="onFormContentClick($event)"
                                   (taskCreated)="onTaskCreated($event)"
                                   (taskDeleted)="onTaskDeleted($event)">
            </activiti-task-details>
              <hr>
              <h5>Attachments</h5>
              <adf-task-attachment-list *ngIf="currentTaskId"
                [taskId]="currentTaskId"
                (attachmentClick)="onAttachmentClick($event)">
              </adf-task-attachment-list>
          </div>
        </div>
      </div>
    </section>


    <!--  PROCESS COMPONENT -->

    <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'processes'" id="processes">
      <div class="page-content" *ngIf="activeTab === 'processes'">
        <div class="page-content">
          <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--2-col task-column  mdl-shadow--2dp">
              <div class="list-buttons">
                <button
                  md-raised-button
                  data-automation-id="btn-start-process"
                  (click)="navigateStartProcess()">
                  <md-icon>add</md-icon>
                  <span>START PROCESS</span>
                </button>
              </div>
              <adf-accordion>
                <adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true" [headingIcon]="'assessment'">
                  <activiti-process-instance-filters
                    [appId]="appId"
                    (filterClick)="onProcessFilterClick($event)"
                    (onSuccess)="onSuccessProcessFilterList($event)">
                  </activiti-process-instance-filters>
                </adf-accordion-group>
              </adf-accordion>
            </div>
            <div class="mdl-cell mdl-cell--3-col task-column list-column mdl-shadow--2dp" *ngIf="processFilter && !isStartProcessMode()">
              <activiti-process-instance-list
                *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
                [processDefinitionKey]="processFilter.filter.processDefinitionKey"
                [name]="processFilter.filter.name"
                [state]="processFilter.filter.state"
                [sort]="processFilter.filter.sort"
                [data]="dataProcesses"
                (rowClick)="onProcessRowClick($event)"
                (onSuccess)="onSuccessProcessList($event)">
                <!-- Custom column definition demo -->
                <!--
                <data-columns>
                    <data-column key="name" title="NAME" class="full-width name-column"></data-column>
                    <data-column key="created" title="Created" class="hidden"></data-column>
                </data-columns>
                -->
              </activiti-process-instance-list>
            </div>
            <div class="mdl-cell task-column mdl-shadow--2dp" *ngIf="!isStartProcessMode()"
                 [class.mdl-cell--7-col]="processFilter && !isStartProcessMode()"
                 [class.mdl-cell--10-col]="!processFilter || isStartProcessMode()">
              <activiti-process-instance-details
                [processInstanceId]="currentProcessInstanceId"
                (processCancelled)="processCancelled()"
                (taskClick)="onProcessDetailsTaskClick($event)">
              </activiti-process-instance-details>
            </div>
            <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartProcessMode()">
              <activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process>
            </div>
          </div>
        </div>
      </div>
    </section>


    <!--  ANALYTICS COMPONENT -->

    <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'reports'" id="report">
      <div class="page-content" *ngIf="activeTab === 'reports'">
        <div class="mdl-grid">
          <div class="mdl-cell mdl-cell--4-col task-column mdl-shadow--2dp">
            <span><h5>Report List</h5></span>
            <hr>
            <analytics-report-list
              [appId]="appId"
              [selectFirst]="selectFirstReport"
              (reportClick)="onReportClick($event)"
              #analyticsreportlist>
            </analytics-report-list>
          </div>
          <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
            <activiti-analytics
              *ngIf="report"
              [appId]="appId"
              [reportId]="report.id"
              [hideParameters]="false"
              (editReport)="onEditReport($event)"
              (reportSaved)="onReportSaved()"
              (reportDeleted)="onReportDeleted()">
            </activiti-analytics>
          </div>
        </div>
      </div>
    </section>

  </main>
</div>

<div *ngIf="fileShowed">
  <alfresco-viewer
    [(showViewer)]="fileShowed"
    [blobFile]="content"
    [displayName]="contentName"
    [overlayMode]="true">
  </alfresco-viewer>
</div>
